<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/reset (1).css">
</head>

<body>

    <body>
        <div class="ly-boxx-list2">
            <div class="ly-active">1111</div>
            <div>222</div>
            <div>333</div>

            <input class="ly-on" type="button" value="按钮1">
            <input type="button" value="按钮2">
            <input type="button" value="按钮3">

        </div>

        <script>
            var aBtn = document.querySelectorAll('.ly-boxx-list2 input')
            var aDiv = document.querySelectorAll('.ly-boxx-list2 div')
            aBtn.forEach(function(ele, index) {
                ele.onclick = function() {
                    for (var i = 0; i < aBtn.length; i++) {
                        // 清空所有按钮样式
                        aBtn[i].className = ''
                            // 清除所有div样式
                        aDiv[i].className = ''
                    }
                    // 当前按钮加class
                    this.className = 'ly-on'
                    aDiv[index].className = 'ly-active'
                }
            })
        </script>
    </body>

</html>